<template>
    <div class="father">Father
        <button @click="getChild($refs)">获取子元素</button>
        <Child ref="ref1" :name="'张飞'" :init-max="500"></Child>

        <Child ref="ref2" :name="'李逵'" :init-max="600"></Child>



        <ol>
            <li style="font-weight: 900;">请战英雄列表</li>
            <li v-for="hero in heros">
                {{ hero }} 申请出战.....
            </li>
        </ol>

    </div>
</template>

<script setup lang="ts" name='Father'>
import { ref, reactive } from "vue";

import Child from "./Child.vue";

let ref1 = ref()
let ref2 = ref()


let heros = reactive([
    '张飞',
    '李逵'
])


function getChild(refs: any) {

    console.log("Father --get  Child");
    // ref1.value.counter++;
    // ref2.value.counter++;

    console.log(refs);
    for (const key in refs) {
        console.log("key", key);
        console.log("refs[key]", refs[key]);

        refs[key].counter++;

    }




}


//给外部暴露一个对象
defineExpose({
    heros
})

</script>

<style scoped>
.father {
    background-color: rgba(168, 231, 20, 0.671);
    border-radius: 10px;
    padding: 10px;
    min-height: 100px;

}
</style>